.card-style {
  width: auto;
  height: 100%;
  border-radius: 8px;
  /* border: 1px solid red; */
  display: flex;
  flex-direction: column;
}

.card-content-style {
  width: 100%;
  height: 80%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 8px;
}

/* @keyframes opacity2 {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 1;
  }
} */
@keyframes opacity2 {
  from {
    /* opacity: 0; */
    z-index: 0;
  }

  to {
    /* opacity: 1; */
    z-index: 50;
  }
}

.card-content-style:hover .card-content-style-mask {
  width: 96%;
  /* animation: opacity2 0.5s linear; */
  /* z-index: 50; */
  opacity: 1;
}

.card-content-style-mask {
  opacity: 0;
  position: absolute;
  width: 96%;
  height: 20%;
  bottom: 21%;
  z-index: 50;
  display: block;
  overflow: hidden;
  background-color: rgba(125, 125, 125, 0.5);
}

.card-bottom-style {
  width: 100%;
  height: 20%;
  z-index: 100;
}

/* width: '100%',
height: '100%',
backgroundColor: 'red',
textAlign: 'left', */
.card-bottom-style-left {
  width: 100%;
  height: 100%;
  /* height: 100px; */
  text-align: left;
  /* background-color: red; */
}

.card-bottom-style-right {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.card-bottom-style-right-text {
  margin-left: 8px;
}
